<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    
</body>
    <!-- <script src="./js/three.js"></script> -->
    <script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script>
    <script>
        var canvas = document.getElementById('canvas');

        //将Canvas绑定到 renderer
        var renderer = new THREE.WebGLRenderer({canvas});

        var width = canvas.clientWidth;
        var height = canvas.clientHeight;

        //将渲染的大小设为与Canvas相同
        renderer.setSize(width, height); 

        //设置默认颜色与透明度 16进制 
        renderer.setClearColor(0xFFFFFF, 1.0); 

        // 创建场景
        var scene = new THREE.Scene()


        // 透视投影照相机  THREE.PerspectiveCamera(fov, aspect, near, far)  
        var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);

        // 设置照相机偏移
        camera.position.set(0, 0, 5);

        // 添加照相机到场景中
        scene.add(camera);

        // 设置一个在原点处的边长为1的正方体：
        var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
            new THREE.MeshBasicMaterial({
                color: 0xff0000,
                wireframe: true
            })
        );
     
        // 添加正方体到场景中
        scene.add(cube);

        // 渲染
        renderer.render(scene, camera);


    </script>
</html>